<template>
  <div>
    <el-card>
      <!-- 添加经纪-搜索模块 -->
      <el-row type="flex" justify="space-between">
        <el-button
          type="primary"
          size="mini"
          @click="addFn"
        >添加经纪</el-button>
        <el-row>
          <el-input v-model="search" placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
          </el-input>
        </el-row>
      </el-row>
      <el-divider />
      <!-- 内容表格 -->
      <el-table :data="userInfo" style="width: 100%" border>
        <el-table-column label="图片" prop="image">
          <template v-slot="{row}">
            <img :src="row.image" width="140">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="mini" @click="updateFn(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider />
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig._limit"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 编辑/添加弹窗 -->
    <el-dialog :title="formData.id? '编辑经纪' : '添加经纪'" :visible="showDialog" @close="closeFn">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="名称" label-width="50px" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="邮箱" label-width="50px" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="电话" label-width="50px" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="地址" label-width="50px" prop="address">
          <el-input v-model="formData.address" />
        </el-form-item>
        <el-form-item label="描述" label-width="50px" prop="desc">
          <el-input v-model="formData.desc" rows="4" type="textarea" resize="none" />
        </el-form-item>
        <el-form-item label="封面" label-width="50px">
          <!-- 图片上传 -->
          <ImageUpload ref="imgupload" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getManagersList, addManagers, getManagersId, deleteManagers, putManagers, searchManagers } from '@/api/managers/index'
import ImageUpload from '@/components/ImageUpload/index.vue'
export default {
  components: { ImageUpload },
  data() {
    return {
      search: '',
      total: 0,
      currentPage: 1,
      percentOver: false,
      showDialog: false,
      userInfo: [],
      formData: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空！', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空！', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号码不能为空！', trigger: 'blur' },
          { pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确手机号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空！', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址不能为空！', trigger: 'blur' }
        ]
        // image: [{ required: true, message: '请上传商户logo', trigger: 'change' }]
      }
    }
  },
  computed: {
    pageConfig() {
      // 设定每页长度
      return {
        _limit: 2,
        _start: (this.currentPage - 1) * 2
      }
    }
  },
  created() {
    this.getManagersList()
  },
  methods: {
    // 获取经纪列表
    async getManagersList() {
      const res = await getManagersList({
        ...this.pageConfig,
        name_contains: this.search || null
      })
      this.userInfo = res.data
      // 获取经纪总数量
      const res1 = await searchManagers({
        ...this.pageConfig,
        name_contains: this.search || null
      })
      this.total = res1.data
    },
    // 页码点击事件
    currentChange(newPag) {
      this.currentPage = newPag
      this.getManagersList()
    },
    // 搜索
    async searchBtn() {
      // const res = await getManagersList({
      //   name_contains: this.search
      // })
      // // console.log(124, res)
      // this.userInfo = res.data
      this.currentPage = 1
      this.getManagersList()
    },
    // 页码发生改变时触发
    // currentChange(curPage) {
    //   this.currentPage._limit = curPage
    //   this.getManagersList()
    // },
    // 删除经纪人
    async delFn(id) {
      this.$confirm('是否确定删除？', '删除', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await deleteManagers(id)
        this.getManagersList()
      }).catch(err => {
        console.log('取消：', err)
      })
    },
    // 图片上传
    async saveImg() {
      const upload = this.$refs.imgupload
      if (upload.percent === 100) {
        this.percentOver = true
        this.formData.image = upload.fileList[0] && upload.fileList[0].url
      } else {
        this.percentOver = false
        if (upload.percent > 0 && upload.percent < 100) {
          return this.$message({
            type: 'warning',
            message: '图片正在上传中，请稍后保存'
          })
        } else {
          if (upload.fileList[0]) {
            this.percentOver = false
          } else {
            return this.$message({
              type: 'warning',
              message: '请上传图片'
            })
          }
        }
      }
    },
    // 新增 / 编辑经纪人
    async confirmFn() {
      // 表单校验
      await this.$refs.form.validate()
      this.saveImg()
      if (this.percentOver || this.formData.id) {
        if (this.formData.id) {
          await putManagers(this.formData)
        } else {
          await addManagers(this.formData)
        }
        // 刷新列表
        this.getManagersList()
        // 关闭弹窗
        this.closeFn()
      }
    },
    // 新增弹窗
    addFn() {
      this.showDialog = true
    },
    // 编辑弹窗渲染
    async updateFn(id) {
      this.showDialog = true
      const res = await getManagersId(id)
      this.formData = res.data
      // 图片回显
      this.$refs.imgupload.fileList.push({
        url: this.formData.image
      })
    },
    // 关闭弹窗
    closeFn() {
      this.formData = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
      // 清空图片回显
      this.$refs.imgupload.fileList = []
      // 清空图片进度
      // this.$refs.imgupload.percent = 0
      // 清除校验
      this.$refs.form.resetFields()
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.input-with-select{
  width: 500px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
